import { useState, useImperativeHandle, useRef, forwardRef } from 'react'
import Taro, { pxTransform } from '@tarojs/taro'
import { View, Text, Input, ScrollView, Image, Button } from '@tarojs/components'
import TopDrawer from './components/TopDrawer';
import { goBack } from '@/utils/utils'
import './index.scss'

function TitlePage(props, ref) {
    const { background = '#ffffff', styleColor = 'black', hasBack = false, hideTitle = false } = props
    const childRef = ref || useRef()
    useImperativeHandle(childRef, () => {
        return {
            onClose: () => {
                setVisible(false)
            }
        }
    })
    const { title, hasOpen = false, } = props
    const menuButtonInfo = Taro.getMenuButtonBoundingClientRect()
    console.log(menuButtonInfo)
    const paddingTop = (menuButtonInfo.top * 2)
    const height = menuButtonInfo.height * 2
    const drawertop = (paddingTop + height)
    const [visible, setVisible] = useState(false)
    return (
        <View>
            <View
                style={{
                    background: background,
                    paddingTop: pxTransform(paddingTop),
                    paddingBottom: pxTransform(24),
                }} className="TitlePage_box">
                {hasBack && <View onClick={() => { goBack() }} className={styleColor === 'black' ? "title_back" : 'title_back1'} ></View>}
                <View
                    className={styleColor === 'black' ? "title" : 'title1'}
                >

                    {title}
                </View>
                {hasOpen && <View
                    onClick={() => { setVisible(true) }}
                    className="right-btn"

                >
                </View>}
            </View>
            {!hideTitle && <View
                className='title_zw'
                style={{
                    paddingTop: pxTransform(paddingTop),
                    height: pxTransform(height),
                    paddingBottom: pxTransform(24 + 36),
                }}></View>}
            <TopDrawer show={visible} onClose={() => { setVisible(false) }} {...props} top={pxTransform(drawertop)}></TopDrawer>
        </View>

    )
}
export default forwardRef(TitlePage)